<template>
    <div id="bar" :style="sty">
        
    </div>
</template>
<script>
    import echarts from 'echarts'
    export default {
        name:'vBar',
        props:['sty'],
        components:{echarts},
        data(){
            return {
                option : {
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['未知', '男','女']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true,
                    },
                    xAxis:  {
                        min:0,
                        max:11000,
                        gridIndex:0,
                        offset:0,
                        type: 'value',
                        axisTick:{
                            show:false,
                            interval:0
                        },
                        axisLine:{
                            show:false
                        },
                        splitLine:{
                            show:false
                        },
                        axisLabel:{
                            margin:20,
                            showMinLabel:false,
                            interval:0
                        },
                        splitNumber:11
                    },
                    yAxis: {
                        type: 'category',
                        data: ['04-16'],
                        axisTick:{
                            show:false
                        }
                    },
                    series: [
                        {
                            name: '未知',
                            type: 'bar',
                            stack: '总量',
                            barCategoryGap:"40%",
                            markArea:{
                                itemStyle:{
                                    normal:{
                                        color:'#fff'
                                    }
                                }
                            },
                            itemStyle:{
                                normal:{
                                        color:'#b7b7b7'
                                    }
                            },
                            data: [100]
                        },
                        {
                            name: '男',
                            type: 'bar',
                            stack: '总量',
                            itemStyle:{
                                normal:{
                                        color:'#f5a27b'
                                    }
                            },
                            data: [1100]
                        },
                        {
                            name: '女',
                            type: 'bar',
                            stack: '总量',
                            itemStyle:{
                                normal:{
                                        color:'#33bef2'
                                    }
                            },
                            data: [8800]
                        }
                    ]
                }
            }
        },
        methods:{},
        mounted:function(){
            this.$nextTick(()=>{
                echarts.init(document.getElementById("bar")).setOption(this.option)
            }) 
        }
        
    }
</script>
<style scoped>

</style>
